<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<!--  <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> -->
</head>
<body>
    <div class="ui menu">
        <div class="header item">
          Our Company
        </div>
        <a class="item">
          About Us
        </a>
        <a class="item">
          Jobs
        </a>
        <a class="item">
          Locations
        </a>
      </div>  
    <div class="ui grid">
        <div class="three wide column">
          <div class="ui vertical fluid tabular menu">
            <a class="active item">
              Bio
            </a>
            <a class="item">
              Pics
            </a>
            <a class="item">
              Companies
            </a>
            <a class="item">
              Links
            </a>
          </div>
        </div>
        <div class="thirteen wide stretched column">
          <div class="ui segment">
            This is an stretched grid column. This segment will always match the tab height
          </div>
        </div>
      </div>
      <div class="ui pagination menu">
          <a class="item">
            1
          </a>
          <div class="disabled item">
            ...
          </div>
          <a class="item active">
            10
          </a>
          <a class="item">
            11
          </a>
          <a class="item">
            12
          </a>
        </div>
        <div class="ui vertical menu">
            <div class="item">
              <div class="header">Products</div>
              <div class="menu">
                <a class="item">Enterprise</a>
                <a class="item">Consumer</a>
              </div>
            </div>
            <div class="item">
              <div class="header">CMS Solutions</div>
              <div class="menu">
                <a class="item">Rails</a>
                <a class="item">Python</a>
                <a class="item">PHP</a>
              </div>
            </div>
            <div class="item">
              <div class="header">Hosting</div>
              <div class="menu">
                <a class="item">Shared</a>
                <a class="item">Dedicated</a>
              </div>
            </div>
            <div class="item">
              <div class="header">Support</div>
              <div class="menu">
                <a class="item">E-mail Support</a>
                <a class="item">FAQs</a>
              </div>
            </div>
          </div>
          <div class="ui menu">
              <div class="item">
                <div class="ui icon input">
                  <input type="text" placeholder="Search...">
                  <i class="search icon"></i>
                </div>
              </div>
              <div class="right item">
                <div class="ui action input">
                  <input type="text" placeholder="Navigate to...">
                  <div class="ui button">Go</div>
                </div>
              </div>
            </div>
            <div class="ui menu">
                <a class="browse item active">
                  Browse
                  <i class="dropdown icon"></i>
                </a>
              </div>
              <div class="ui fluid popup bottom left transition hidden">
                <div class="ui four column relaxed equal height divided grid">
                  <div class="column">
                    <h4 class="ui header">Fabrics</h4>
                    <div class="ui link list">
                      <a class="item">Cashmere</a>
                      <a class="item">Linen</a>
                      <a class="item">Cotton</a>
                      <a class="item">Viscose</a>
                    </div>
                  </div>
                  <div class="column">
                    <h4 class="ui header">Size</h4>
                    <div class="ui link list">
                      <a class="item">Small</a>
                      <a class="item">Medium</a>
                      <a class="item">Large</a>
                      <a class="item">Plus Sizes</a>
                    </div>
                  </div>
                  <div class="column">
                    <h4 class="ui header">Colored</h4>
                    <div class="ui link list">
                      <a class="item">Neutrals</a>
                      <a class="item">Brights</a>
                      <a class="item">Pastels</a>
                    </div>
                  </div>
                  <div class="column">
                    <h4 class="ui header">Types</h4>
                    <div class="ui link list">
                      <a class="item">Knitwear</a>
                      <a class="item">Outerwear</a>
                      <a class="item">Pants</a>
                      <a class="item">Shoes</a>
                    </div>
                  </div>
                </div>
              </div>  
              <div class="ui inverted menu">
                  <a class="active item">
                    Home
                  </a>
                  <a class="item">
                    Messages
                  </a>
                  <a class="item">
                    Friends
                  </a>
                </div>
                <div class="ui icon menu">
                    <a class="item">
                      <i class="gamepad icon"></i>
                    </a>
                    <a class="item">
                      <i class="video camera icon"></i>
                    </a>
                    <a class="item active">
                      <i class="video play icon"></i>
                    </a>
                  </div>
                  <div class="ui vertical icon menu">
                    <a class="item">
                      <i class="gamepad icon"></i>
                    </a>
                    <a class="item">
                      <i class="video camera icon"></i>
                    </a>
                    <a class="item">
                      <i class="video play icon"></i>
                    </a>
                  </div>
                  <div class="ui pointing vertical menu">
                      <a class="item">
                        Site Title
                      </a>
                      <div class="item">
                        <b>Grouped Section</b>
                        <div class="menu">
                          <a class="item">Subsection 1</a>
                          <a class="active item">Subsection 1</a>
                          <a class="item">Subsection 1</a>
                        </div>
                      </div>
                      <div class="ui dropdown item">
                        Dropdown <i class="dropdown icon"></i>
                        <div class="menu">
                          <div class="item">Choice 1</div>
                          <div class="item">Choice 2</div>
                          <div class="item">Choice 3</div>
                        </div>
                      </div>
                    </div>                                         
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--  <script src="semantic/dist/semantic.min.js"></script> -->
</body>
</html>